import React, { useMemo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useContext } from 'react';
import { useRouter } from 'next/router';
import { Button, } from 'antd';
import Image from 'next/image';
import { ChatContext } from '@/app/chat-context';
import { PlusOutlined } from '@ant-design/icons';
import WorkbenchesIcon from '@/components/workbenches/icons';
import { ComponentType, } from '@/components/workbenches/hooks/type';
import { WorkbenchesContext, } from '@/components/workbenches/workbenches-context';
const dataTree = () => {
  const { t, i18n } = useTranslation();
  const { mode } = useContext(ChatContext);
  const {
    addTabs,
  } = useContext(WorkbenchesContext);
  const items = useMemo(() => {
    return [
      { title: t('w_DatabaseInsights') },
      { title: t('w_modelBuilding') },
      { title: t('w_sqlQuery') },
      { title: t('w_AICoPilot') }
    ];
  }, [mode]);
  return (
    <div className='w-full h-full flex flex-col items-center justify-center'>
      <div className='flex flex-row items-center'>
        <div>
          <Image
            src='/ai/workbenches/stone.png' alt='DB-GPT'
            width={50}
            height={50}
          />
        </div>
        <div
          className='ml-4'>
          <Image
            className='mt-3'
            src={mode === 'dark' ? '/ai/workbenches/workbenches.png' : '/ai/workbenches/workbenches2.png'} alt='DB-GPT'
            width={130}
            height={80}
          />
        </div>
      </div>
      <div className='mt-8'>
        {items.map(i => (<div>{i.title}</div>))}
      </div>
      <Button
        className='border-none text-white bg-button-gradient mt-8'
        shape="round" onClick={() => addTabs({ info: {} }, ComponentType.QUERY)}
      >
        <PlusOutlined />
        {t('w_addQuery')}

        <WorkbenchesIcon type='查询' styClass='text-white !w-4 !h-4' />
      </Button>
      <Button
        className='border-none text-white bg-button-gradient mt-2'
        shape="round" onClick={() => addTabs({ info: {} }, ComponentType.MODEL)}
      >
        <PlusOutlined />
        {t('w_addModel')}
        <WorkbenchesIcon type='模型' styClass={'text-white'} />
      </Button>
    </div>
  );
}

export default dataTree;
